/* 这里是引入vue文件 */
import Vue from 'vue'
/* 这里是引入同目录下的App.vue模块，在components中追加。 */
import App from './App'
/* 这里是引入vue的路由 */
import router from './router'
// 引入element-ui框架库，大型项目VUE能不导入就不导入，全部采用外接。
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// 引入vant-ui框架库
//import Vant from 'vant';
//import 'vant/lib/index.css'
// 引入Echarts，改用CDN方式引用，下面导入。
// import echarts from 'echarts'
/* 这里是引入Jquery，不过这句话加或不加效果都是一样的。 */
// import $ from 'jquery'
/* 引入Vue-Resource，资源插件，用于获取Static目录内的数据（真的静态，而不是src/assets，这个目录会由webpack打包。） */
import VueResource from 'vue-resource'
import VueCookies from 'vue-cookies'
import VueWorker from 'vue-worker'

// 引用 VConosle
// import VConosle from 'vconsole';

/* 这里是引入Axios */
// import axios from 'axios/dist/axios.js' 改进由webpack.base.conf配置
// import axios from 'axios'

/* quill register */
import VueQuillEditor,{ Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize);
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 引用bootstrap使全站都能够支持
// import 'bootstrap/dist/js/bootstrap.min.js'
// import 'bootstrap/dist/css/bootstrap.min.css'
// import 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.css'
// import 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.js'
// // 绑定中文语言包
// import 'bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js'

// 引用阿里字体样式库iconfont，不需要打包，原封不动的拷贝过去的，这里有个好处，可以引用css、js、img
// import  '../static/resource/script/component/iconfont/iconfont.css'
// 这是直接打包模式，经过测试，可直接引用。//目前已经通过框架皮肤方式引入。
// import 'iconfont/iconfont.css'
// import 'iconfont/iconfont.js'

// 引用video组件，此组件只支持app/ios/android，后续如果要使用，全部通过外部引用。
// import VideoPlayer from 'vue-video-player'
// import VideoControlHLS from 'videojs-contrib-hls'
// import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'

/* 这里是全局引用外部JS，在VUE框架内【this.$OutTestJS.getout("BBBB");】
在VUE外，只有在Main函数才能使用调用【vmm.$OutTestJS.getout("AAA");】 */
/* export模式，可以指定多个函数，但是必须带花括号，没有用到的函数是灰色。
如果使用export default，则可以给这个引用的函数命名，然后全部的函数、方法均可使用。 */
import outjs from '../src/assets/js/out.js'
// require("../static/conf.js"); // 能加载。。但是也是预编译的。。不能动态改。

/* 引用八爪鱼框架组件 */
import OctopusList from './components/Engine/Framework/ListEngine'
import OctopusItem from './components/Engine/Framework/ItemEngine'
import OctopusControl from './components/Engine/Framework/ControlEngine'
import OctopusDialog from './components/Engine/Framework/DialogEngine'
import OctopusTree from './components/Engine/Framework/TreeEngine'
// import OctopusEditor from './components/Engine/Framework/EditorEngine'
import OctopusBoard from './components/Engine/Framework/BoardEngine'
import OctopusAppList from './components/Engine/FrameworkAPP/ListEngine'
import OctopusAppItem from './components/Engine/FrameworkAPP/ItemEngine'
import OctopusAppControl from './components/Engine/FrameworkAPP/ControlEngine'

/* 各类APP专属Menu控件，同时兼容 APP 和 小程序 */
import OctopusAppMenuBuilding from './components/Engine/FrameworkAPP/MenuEngineBuilding'
import OctopusAppMenuCampus from './components/Engine/FrameworkAPP/MenuEngineCampus'
import OctopusAppMenuEpidemic from './components/Engine/FrameworkAPP/MenuEngineEpidemic'

/* 引用八抓鱼报表组件 */
import OctopusReportBar from './components/Engine/Report/BarReportEngine'
import OctopusReportPie from './components/Engine/Report/PieReportEngine'
import OctopusDashboard from './components/Engine/Report/DashboardEngine'



/* 引用AIGC公共css */
// import '../static/skin/default/base/css/common.css'
// import '@/static/skin/default/base/css/custom.scss'


/* 引用八爪鱼 */
import {oEngine} from '../src/assets/octopus/main.js'


Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.prototype.$OutTestJS = outjs; // 将外部JS注入VUE原型链，使之在VUE体制内可以随意使用。


// 首页及登陆页不加载百度报表，所以判断一下，已经取消echarts的每页加载。
// let isEcharts = typeof echarts;
// if (isEcharts != "undefined") {
// // 完整引入Echarts
//   Vue.prototype.$echarts = echarts;
// }
// Vue.prototype.$axios = axios;

// 将海康萤石库引入八抓鱼Plug库。
// Vue.prototype.$Plug = {HK: EZUIPlayer, Test: outjs};
Vue.prototype.$Plug = {HK: outjs, Test: outjs};
// 引用Vue-Resource
Vue.use(VueResource);
Vue.use(VueCookies);
Vue.use(VueWorker);// 教程：http://www.cnblogs.com/axl234/p/9254755.html
Vue.use(VueQuillEditor);  // use quill
// 完整引入Element-ui，但是这里是通过外部引用搞定的。
// Vue.use(ELEMENT, {size: 'small', zIndex: 3000});

// 完整引入Vant，已经通过cdn方式实现。
// Vue.use(Vant);
// 完整引入video组件
// Vue.use(VideoPlayer);
// Vue.use(VideoControlHLS);

// 注册八爪鱼框架引擎
Vue.component("o-list", OctopusList);
Vue.component("o-item", OctopusItem);
Vue.component("o-control", OctopusControl);
Vue.component("o-dialog", OctopusDialog);
Vue.component("o-tree", OctopusTree);
// Vue.component("o-editor", OctopusEditor);
Vue.component("o-board", OctopusBoard);
Vue.component("o-app-item", OctopusAppItem);
Vue.component("", OctopusAppList);
Vue.component("o-app-control", OctopusAppControl);

// 注册专用菜单
Vue.component("o-app-menu-building", OctopusAppMenuBuilding);
Vue.component("o-app-menu-campus", OctopusAppMenuCampus);
Vue.component("o-app-menu-epidemic", OctopusAppMenuEpidemic);

Vue.component("o-rep-bar", OctopusReportBar);
Vue.component("o-rep-pie", OctopusReportPie);
Vue.component("o-dashboard", OctopusDashboard);

/* eslint-disable no-new */
var vm = new Vue({
  el: '#app', /* 定义作用范围就是index.html里的id为app的范围内 */
  router, /* 引入路由 */
  template: '<App/>', /* 给Vue实例初始一个App组件作为template 相当于默认组件 */
  components: {App}, /* 注册引入的组件App.vue */
  data: {
    octopus: null,
  },
  // 生命周期钩子：创建前调用，此时不管是当前组件，还是所有子组件的这个函数，data都无法获取到，创建前的准备工作可以放在这里。
  // beforeCreate: function () {
  //   this.octopus.tips.debug("Vue.Main执行了beforeCreate事件。");
  // },
  // 生命周期钩子：创建后动态加载样式库、自动渲染引擎（如果有模板文件）
  created: function () {
    // 本来是放在data直接初始化的，但是在data初始化获取不到this.$前缀的钩子
    if (!this.octopus) {
      this.octopus = new oEngine(this);
    }
  },
  beforeUpdate: function () {
    this.octopus.tips.debug("Vue.vue执行了beforeUpdate事件。");
  },
  // 更新后（组件更新完成后触发）
  beforeRouteEnter: function (to, from, next) {
    this.octopus.tips.debug("Vue.vue执行了beforeRouteEnter事件。");
  },
  // 生命周期钩子：安装完成，但是VUE不会承诺100%的完成才执行该事件。
  mounted: function () {
    // this.octopus.vue.$Toast.success("登陆！！！！！！");

    this.octopus.tips.debug("Vue.Main执行了mounted事件。");
  },
  activated: function () {
    this.octopus.tips.debug("Vue.Main执行了activated事件。");
  },
  // 计算函数
  computed: {},
  // 监听函数
  watch: {
    // 能进这里的说明路由都匹配上了，但是有个问题，此处的监听在页面刷新时是无效的。
    $route(to, from) {
      this.octopus.router.set(to);
      this.octopus.tips.debug("Main.js路由：" + to.path + " - " + from.path + ", octopus.route: " + this.octopus.router.get().fullPath
        + "判断是否具有用户权限，如果有则过，没有则跳转501（没有权限）页面。");

      // // 注册测试页
      // this.octopus.router.getter().addRoutes([{
      //   path: "/APP/Device/Main/Page",
      //   name: 'DevicePage',// 每个页面只会存在一个【动态模块】，所以统一名字。
      //   component: require('@/components/APP/Device/Main/Page').default
      // }]);
      //
      // // 启动跳转页面的信息
      // console.log(from);
      // // 目标页面的信息
      // console.log(to);
      // // 路由信息
      // console.log(this.octopus.router);
      //
      // this.octopus.router.jump("/APP/Device/Main/Page");
    },
    // 如果用户名发生变更，则密码自动清空，同時tab清空只保留默认，因为更换账户了，记忆的标签页因为权限不同，肯定也变了。
    'octopus.passport.name': function (newv, oldv) {
      this.octopus.tips.debug("[watch] octopus.passport.name: " + JSON.stringify(newv));
      if (oldv != undefined) {
        this.octopus.passport.encryption = false;
        this.octopus.passport.password = "";
        this.octopus.passport.appKey = "";
        this.octopus.passport.token = "";
        this.octopus.passport.id = -1;
        this.octopus.passport.tab = [{id: -1, url: "/main/platform/dashboard", name: ""}];
        this.octopus.passport.tabCurrentName = "M_0";
        this.octopus.passport.system = null;
        this.octopus.passport.menu = [];
      }

    },
    // 舰艇学校对象
    // 'octopus.passport.campus': function (newv, oldv) {
    //   alert("campus");
    //   this.octopus.tips.debug("[watch] octopus.passport: CAMPUS！！！！");
    // },
    // 只要密码变更则设置为false，登录时会自动完成加密。
    'octopus.passport.password': function (newv, oldv) {
      this.octopus.tips.debug("[watch] octopus.passport.password: " + JSON.stringify(newv));
      if (oldv != undefined && this.octopus.passport.encryption == true) {
        this.octopus.passport.encryption = false;
        this.octopus.passport.appKey = "";
        this.octopus.passport.token = "";
        this.octopus.passport.id = -1;
      }
    },
    // 深度监听passport数据，实时更新至缓存，永不删除。
    'octopus.passport': {
      // 在更新而不是替换对象或数组时，新旧数据相同，因为他们的引用只想同一个对象，Vue不会保留变异之前的副本。
      handler(newv, oldv) {
        // 首次加载因为还没有加载各框架，所以通过判断oldv来跳过第一次的创建。
        if (oldv != undefined) {
          // 保存至LocalStorage
          if (!this.octopus.tools.IsNullOrEmpty(newv)) {
            this.octopus.request.localstorage.set("user_passport", newv);
          }
        }
      },
      deep: true
    }
  }
});


// getConfig();
/* 获取外挂，外部采用vm.$xxx，内部采用this.$xxx */
vm.$OutTestJS.getout("AAA", vm);
// 另外一种别名调用方式
outjs.getout("BBB", vm);


// 经过试验证明如果要通过JQuery来获取VUE内渲染的DOM必须得等到VUE全部渲染完成才行。。。shit。。。
// 事实也证明，第一次初始化完成后的事件里可以使用JQuery进行正常操作。
// vm.$OutTestJS.testFun2("AAA");
